<template>
  <div class="main">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="form.username" name="username" label="用户名" placeholder="用户名"
                   :rules="[{ required: true, message: '请填写用户名' }]"/>
        <van-field v-model="form.password" type="password" name="password" label="密码" placeholder="密码"
                   :rules="[{ required: true, message: '请填写密码' }]"/>
        <van-field v-model="form.rePassword" type="password" name="rePassword" label="密码" placeholder="密码"
                   :rules="[{ required: true, message: '请填写密码' }]"/>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          注册
        </van-button>
        <van-button style="margin-top: 16px;" round block type="primary" @click="goLogin">
          去登陆
        </van-button>
      </div>
    </van-form>

  </div>
</template>
<script setup>
import {ref, reactive} from 'vue'
import {useRouter} from "vue-router";
import {showToast} from "vant";
import {reg} from '@/api'
const router = useRouter()
const form = reactive({
  username: '',
  password: '',
  rePassword: ''
})

const onSubmit = () => {
  if (!form.username) {
    showToast({
      type: 'fail',
      message: '请输入用户名'
    })
  }

  if (!form.password) {
    showToast({
      type: 'fail',
      message: '请输入用密码'
    })
  }
  if (!form.rePassword) {
    showToast({
      type: 'fail',
      message: '请再次输入用密码'
    })
  }

  if (form.password !== form.rePassword) {
    showToast({
      type: 'fail',
      message: '两次密码输入不一致'
    })
    return
  }

  reg(form).then(res=>{
    showToast({
      message: res.message
    })
  })

}
const goLogin = () => {
  router.push('/login')
}
</script>
<style scoped>
.main {
  margin-top: 150px;
}
</style>